<template>
  <div
    v-show="isSideMenuShow"
    :style="{ width: `${collapsed ? minWidth : currentWidth}px` }"
    :class="{ 'side-menu-box': true, 'side-menu-collapsed': collapsed }"
  >
    <div style="display: flex; height: 100%; width: 100%;">
      <a-menu
        :selected-keys="activeMenuPath"
        mode="inline"
        :inline-collapsed="collapsed"
        class="menu-list"
      >
        <a-menu-item
          v-for="viewButton in displayMenuItems"
          :key="viewButton.path"
          class="menu-item"
          @click="clickMenu(viewButton.path)"
        >
          <a-icon-font class="menu-item-icon" :type="viewButton.icon" />
          <span>{{ viewButton.name }}</span>
        </a-menu-item>
      </a-menu>
      <div id="studio-menu-resize-line" class="studio-menu-resize-line" />
    </div>
  </div>
  <!-- <a-button type="primary" class="collapsed-button" @click="toggleCollapsed">
    <a-icon-font :type="collapsed ? 'iconcebianshouqi1' : 'iconcebianzhankai'" />
  </a-button> -->
  <!-- :default-selected-keys="activeMenuPath" 初始选中的菜单项 key 数组 -->

  <!--  </div>-->
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import UserStore from '@/store/modules/user'

import STUDIO_ROUTE_CONFIG, { CHILD_ROUTE_METADATA } from '@/router/studio'

@Component
export default class StudioSideMenu extends Vue {
  private minWidth = 64 // 最小宽度
  private maxWidth = 260 // 最大宽度
  private currentWidth = 160 // 当前宽度

  mounted() {
    DataViewStore.setSideMenu(true)
    this.initViewEvent()
  }

  // 初始化resize事件
  public initViewEvent() {
    const resizeBar = document.querySelector('#studio-menu-resize-line') as any

    // 鼠标按下事件
    const mouseDownEvent = ($event: any) => {
      const initCurrentWidth = this.currentWidth
      const startX = $event.clientX
      const mouseMoveEvent: any = (event: any) => {
        const endX = event.clientX
        const moveLength = endX - startX
        let newWidth = initCurrentWidth + moveLength
        if (newWidth > this.maxWidth) {
          newWidth = this.maxWidth
        } else if (newWidth < this.minWidth) {
          newWidth = this.minWidth
        }
        this.currentWidth = newWidth

        // 如果最小宽度小于80，则折叠
        if (!this.collapsed && this.currentWidth < 100) {
          DataViewStore.setCollapsed(true)
        } else if (this.collapsed && this.currentWidth >= 100) {
          DataViewStore.setCollapsed(false)
        }
        this.$forceUpdate()
      }
      document.addEventListener('mousemove', mouseMoveEvent)
      const mouseUpEvent: any = () => {
        document.removeEventListener('mousemove', mouseMoveEvent)
        document.removeEventListener('mouseup', mouseUpEvent)
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        resizeBar.releaseCapture && resizeBar.releaseCapture()
      }
      document.addEventListener('mouseup', mouseUpEvent)
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      resizeBar.setCapture && resizeBar.setCapture()
      return false
    }
    resizeBar.addEventListener('mousedown', mouseDownEvent)
    this.$once('hook:beforeDestroy', () => {
      resizeBar.removeEventListener('mousedown', mouseDownEvent)
    })
  }

  public viewButtons = STUDIO_ROUTE_CONFIG.children
    ?.filter(
      (childRoute) =>
        CHILD_ROUTE_METADATA[childRoute.path].displayedAsViewButton
    )
    .map((childRoute) => ({
      path: childRoute.path,
      name: childRoute.name,
      icon: CHILD_ROUTE_METADATA[childRoute.path].icon,
    }))

  // private collapsed:boolean = false

  public get activeMenuPath() {
    const selectMenuKey: any = STUDIO_ROUTE_CONFIG.children?.filter(
      (childRoute: any) => {
        return this.$route.matched.slice(-1)[0].path.includes(childRoute.path)
      }
    )[0]
    return [selectMenuKey ? selectMenuKey.path : '']
  }

  public get displayMenuItems() {
    if (this.isProjectCreator) {
      return this.viewButtons // 项目创建者返回全部菜单，否则只返回数据视图菜单
    }
    return this.viewButtons?.filter((item) => item.path === 'data')
  }

  public get isProjectCreator() {
    return UserStore.userRole?.id === 1
  }

  public get isSideMenuShow() {
    if (
      (this.$route.path.includes('graph') ||
        this.$route.path.includes('trainning') ||
        this.$route.path.includes('create') ||
        this.$route.path.includes('config') ||
        this.$route.path.includes('report') ||
        this.$route.path.includes('source')) &&
      !this.$route.path.includes('graph-analysis')
    ) {
      return false
    }
    return DataViewStore.isSideMenuShow
  }

  // public toggleCollapsed() {
  //   this.collapsed = !this.collapsed
  //   DataViewStore.setCollapsed(this.collapsed)
  // }

  public get collapsed() {
    return DataViewStore.collapsed
  }

  public clickMenu(routePath: string) {
    this.$router.push(routePath)
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.side-menu-box {
  height: 100%;
  position: relative;
  user-select: none;

  &.side-menu-collapsed {
    width: 64px;

    .ant-menu-inline-collapsed {
      width: 100%;
    }

    .ant-menu-inline-collapsed > .ant-menu-item {
      padding: 0 16px !important;
      text-align: center;
    }
  }
}

.studio-menu-resize-line {
  background-color: transparent;
  cursor: col-resize;
  height: 100%;
  position: absolute;
  right: 3px;
  width: 5px;
}

.collapsed-button {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 16px;
  height: 22px;
  left: 74px;
  line-height: 22px;
  margin-left: 24px;
  opacity: 0.8;
  padding: 0 4px;
  position: absolute;
  top: -43px;
  width: 22px;

  &:hover {
    opacity: 1;
  }
}

.menu-list {
  height: 100%;
  // width: calc(100% - 5px);
  width: 100%;
}

.menu-item-icon {
  font-size: 16px;
  vertical-align: middle;
}

/deep/ .ant-menu-vertical {
  .ant-menu-item::after {
    left: 0;
    right: auto;
  }

  .ant-menu-item-selected::after {
    left: 0;
    opacity: 1;
    right: auto;
    transform: scaleY(1);
  }
}

/deep/ .ant-menu-item-selected::after,
/deep/ .ant-menu-item::after {
  left: 0;
  right: auto;
}
</style>
